<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2014/11/24
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="session"/>
<!DOCTYPE html>

<html>
<head>
    <title>增值服务管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/icon.css">
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#search").click(function(){
                $('#tt').datagrid('load',{
                    title: $('#title').val()
                });
            });
        });
    </script>
</head>
<body class="easyui-layout">
<div region="center" style="padding:5px;" border="false">
<!--列表-->
<table id="tt" class="easyui-datagrid" title="增值服务管理"
       data-options="singleSelect:true,collapsible:true,url:'${path}/addValue/getAddValue.do',
       method:'get',toolbar:'#tb',footer:'#ft',pagination:'true',fit:'true'">
    <thead>
    <tr>
        <th data-options="field:'id',align:'center',width:80">序号</th>
        <th data-options="field:'nameCn',align:'center',width:100">标题(中)</th>
        <th data-options="field:'nameEn',align:'center',width:100">标题(英)</th>
        <th data-options="field:'price',width:80,align:'center'">价格</th>
        <th data-options="field:'sort',width:80,align:'center'">排序</th>
        <th data-options="field:'descriptionCn',width:220">描述(中)</th>
        <th data-options="field:'descriptionEn',width:220">描述(英)</th>
        <th data-options="field:'addvalueStatus',width:80,formatter:function(v){if(v == 101001){ return '激活';}else{return '停用'}}">状态</th>
        <th data-options="field:'action',align:'center',width:80,formatter:rowformatter">操作</th>
    </tr>
    </thead>
</table>
 </div>
<!--头工具项-->
<div id="tb" style="padding:2px 5px;">
    标题: <input class="easyui-textbox" name="title" id="title" style="width:110px">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="search">查找</a>
</div>
<!--尾工具项-->
<div id="ft" style="padding:2px 5px;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
</div>
<!--添加编辑页面-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">增值服务信息</div>
    <form id="fm" class="easyui-form" method="post" data-options="novalidate:true" >
        <div class="fitem">
            <label>标题(中):</label>
            <input name="nameCn" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>标题(英):</label>
            <input name="nameEn" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>价格:</label>
            <input name="price" class="easyui-numberbox" precision="2" required="true">
        </div>
        <div style="margin-bottom: 5px">
            <label style="display: inline-block;width: 80px;">状态:</label>
            <input type="radio" name="addvalueStatus" value="101001">激活
            <input type="radio" name="addvalueStatus" value="101002">停用
        </div>
        <div class="fitem">
            <label>排序:</label>
            <input name="sort" class="easyui-numberbox"  required="true">
        </div>
        <div class="fitem">
            <label>描述(中):</label>
            <input name="descriptionCn" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>描述(英):</label>
            <input name="descriptionEn" class="easyui-textbox" required="true">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
<script type="text/javascript">
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','添加增值服务');
        $('#fm').form('clear');
        url = '${path}/addValue/saveAddValue.do';
    }
    function editUser(){
        var row = $('#tt').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','修改增值服务');
            $('#fm').form('load',row);
            url = '${path}/addValue/updateAddValue.do?addvalueId='+row.id;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                //var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#tt').datagrid('reload');    // reload the user data
                }
            }
        });
    }
    function destroyUser1(index){
        var row = $('#tt').datagrid('getData').rows[index];
        if (row){
            $.messager.confirm('提示','你是否确定要停用此增值服务?',function(r){
                if (r){
                    $.post('${path}/addValue/stopAddValue.do',{id:row.id},function(result){
                        if (result.errormsg == undefined){
                            $('#tt').datagrid('updateRow', {
                                index:index,
                                row:{
                                    addvalueStatus:101002
                                }
                            });
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errormsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
    function destroyUser2(index){
        var row = $('#tt').datagrid('getData').rows[index];
        if (row){
            $.messager.confirm('提示','你是否确定要激活此增值服务?',function(r){
                if (r){
                    $.post('${path}/addValue/activateAddValue.do',{id:row.id},function(result){
                        if (result.errormsg == undefined){
                            $('#tt').datagrid('updateRow', {
                                index:index,
                                row:{
                                    addvalueStatus:101001
                                }
                            });
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errormsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
    function rowformatter(value,row,index){
        if(row.addvalueStatus == 101001){
            return '<a href="#" onclick="destroyUser1('+index+')">停用</a>';
        }else{
            return '<a href="#" onclick="destroyUser2('+index+')">激活</a>';
        }
    }
</script>
<style type="text/css">
    #fm{
        margin:0;
        padding:10px 30px;
    }
    .ftitle{
        font-size:14px;
        font-weight:bold;
        padding:5px 0;
        margin-bottom:10px;
        border-bottom:1px solid #ccc;
    }
    .fitem{
        margin-bottom:5px;
    }
    .fitem label{
        display:inline-block;
        width:80px;
    }
    .fitem input{
        width:160px;
    }
</style>
<!--添加编辑页面-->
</body>
</html>
